
/**
 * @desc 酒店设置，新增/修改弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="632px"
    >
      <el-scrollbar ref="scroll" v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="Api_POST_HotelCreateDto" class="gl_form_mini" :model="Api_POST_HotelCreateDto" :rules="Api_POST_HotelCreateDto_Rules" label-position="top" label-width="120px" style="padding:0 30px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="personalUserInfo_img_wrap">
                <el-form-item label="酒店图片" prop="imagePath">
                  <el-input v-show="false" v-model.trim="Api_POST_HotelCreateDto.imagePath" />
                  <photo-cropper-dialog
                    ref="photoCropper"
                    class="gl_dialog_TitleLine"
                    auto-crop-width="300px"
                    auto-crop-height="300px"
                    :fixed-number="[213, 200]"
                    :enlarge="1"
                    @photoCropperSave="photoCropperSave"
                  />
                  <div class="upload_game_img" @click="openPhotoCropper">
                    <img v-if="Api_POST_HotelCreateDto.imagePath" class="show_img" :src="getStaticPhotoUrl(Api_POST_HotelCreateDto.imagePath)" @error="errorPhoto">
                    <i v-else class="el-icon-plus" />
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="18" style="">
              <div style="margin-top:110px">
                <span class="tip_info_style">文件格式：jpg、jpeg、png</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="酒店名称" prop="name">
                <el-input v-model="Api_POST_HotelCreateDto.name" placeholder="请输入" type="text" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="酒店星级">
                <el-select v-model="Api_POST_HotelCreateDto.hotelRatingCode" placeholder="请选择" style="width:100%" size="mini">
                  <el-option v-for="item in dict.hotelRating" :key="item.code" :value="item.code" :label="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 酒店所在地 -->
              <el-form-item label="酒店所在地" prop="addressData">
                <el-cascader ref="cascader" :key="cascaderKey" v-model="Api_POST_HotelCreateDto.addressData" :options="district" :props="{ value: 'code', label: 'name' }" :placeholder="$t('tenant.pleaseSelect')" size="mini" style="width: 100%;" @change="changeAddressData" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  v-model="Api_POST_HotelCreateDto.address"
                  type="textarea"
                  show-word-limit
                  :rows="2"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 入住时间 -->
              <el-form-item label="入住时间">
                <el-time-picker
                  v-model="checkInTime"
                  placeholder="入住时间"
                  format="HH:mm"
                  value-format="HH:mm"
                  size="mini"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 离店时间 -->
              <el-form-item label="离店时间">
                <el-time-picker
                  v-model="checkOutTime"
                  placeholder="离店时间"
                  format="HH:mm"
                  value-format="HH:mm"
                  size="mini"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 描述 -->
              <el-form-item label="酒店介绍">
                <el-input
                  v-model="Api_POST_HotelCreateDto.description"
                  type="textarea"
                  show-word-limit
                  :rows="3"
                  placeholder="请输入酒店介绍"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 编辑的保存按钮 -->
        <el-button v-if="type == 'edit'" type="primary" :loading="submitLoading" size="mini" @click="saveEdit()">确 定</el-button>
        <!-- 新增的保存按钮 -->
        <el-button v-else type="primary" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { SiSTKWEventsManagementHotelCreateDto } from '@/lib/form/game/swaggerForm';
import defaultHotelImg from '@/assets/images/face_default.png';
import validator from '@/lib/validate/index.js';
import photoCropperDialog from '../photoCropperDialog';
import { CopyData } from '@/lib';

export default {
  components: {
    photoCropperDialog
  },
  props: {
    district: {
      type: Array,
      default() {
        return [];
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    dictAll: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      Api_POST_HotelCreateDto: new SiSTKWEventsManagementHotelCreateDto(),
      photoCropperVisible: false, // 上传图片窗口的显示与隐藏
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      checkInTime: '',
      checkOutTime: '',
      photoCropperOption: {
        img: '',
        autoCropWidth: '213px',
        autoCropHeight: '200px',
        enlarge: 1,
        fixedNumber: [213, 200]
      },
      Api_POST_HotelCreateDto_Rules: { // 必填项，验证密码格式
        imagePath: [
          { required: true, message: '请上传酒店照片', trigger: 'blur' }
        ],
        // 酒店名称
        name: [
          // 酒店名称不能为空
          validator.required('酒店名称不能为空')
        ],
        // 酒店地址
        addressData: [
          // 酒店地址不能为空
          {
            type: 'array',
            required: true,
            validator(rule, value, callback) {
              callback(validator.checkArray(value, '酒店地址不能为空'));
            },
            trigger: 'change'
          }
        ],
        address: [
          // 详细地址不能为空
          validator.required('详细地址不能为空')
        ]
      },
      title: '',
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      editionList: [],
      cascaderKey: null, // 用于重置级联选择器
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      rowId: '' // 编辑时候的id
    };
  },
  computed: {
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs.scroll.wrap.scrollTop = 0;
        this.$refs['Api_POST_HotelCreateDto'].resetFields();
      }
    }
  },
  methods: {
    // 地址栏改变
    changeAddressData() {
      this.Api_POST_HotelCreateDto.countyCode = this.Api_POST_HotelCreateDto.addressData[0] || '';
      this.Api_POST_HotelCreateDto.provinceCode = this.Api_POST_HotelCreateDto.addressData[1] || '';
      this.Api_POST_HotelCreateDto.cityCode = this.Api_POST_HotelCreateDto.addressData[2] || '';
    },
    // 根据用户id获取信息
    // api_GET_TenantsId() {
    //   api_GET_TenantsId(this.rowId).then(res => {
    //     CopyData(res, this.Api_POST_HotelCreateDto);
    //     this.$set(this.Api_POST_HotelCreateDto, 'addressData', [this.Api_POST_HotelCreateDto.countyCode, this.Api_POST_HotelCreateDto.provinceCode, this.Api_POST_HotelCreateDto.cityCode]);
    //   }, error => {
    //     const _msg = error.error.message || error.message;
    //     this.$message({ type: 'error', message: _msg });
    //   });
    // },
    open(row, type) {
      this.loading = true;
      this.type = type;
      this.rowId = row ? row.id : '';
      this.title = type === 'edit' ? '编辑酒店' : '添加酒店';
      this.Api_POST_HotelCreateDto = new SiSTKWEventsManagementHotelCreateDto();
      this.checkInTime = '';
      this.checkOutTime = '';
      if (this.rowId) {
        CopyData(row, this.Api_POST_HotelCreateDto);
        this.$set(this.Api_POST_HotelCreateDto, 'addressData', [this.Api_POST_HotelCreateDto.countyCode, this.Api_POST_HotelCreateDto.provinceCode, this.Api_POST_HotelCreateDto.cityCode]);
        this.checkInTime = row.checkInTime;
        this.checkOutTime = row.checkOutTime;
        // this.$set(this.checkInTime, row.checkInTime);
        // this.$set(this.checkOutTime, row.checkOutTime);
        console.log(this.Api_POST_HotelCreateDto);
      } else {
        this.Api_POST_HotelCreateDto.hotelRatingCode = 'NoneStar';
        this.$set(this.Api_POST_HotelCreateDto, 'addressData', []);
        ++this.cascaderKey; // 级联选择器的重置
      }
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.loading = false;
      });
    },
    // 新增
    saveNew() {
      const returnData = new SiSTKWEventsManagementHotelCreateDto();
      CopyData(this.Api_POST_HotelCreateDto, returnData);
      if (this.checkInTime) {
        returnData.checkInHour = this.checkInTime.split(':')[0];
        returnData.checkInMinute = this.checkInTime.split(':')[1];
      }
      if (this.checkOutTime) {
        returnData.checkOutHour = this.checkOutTime.split(':')[0];
        returnData.checkOutMinute = this.checkOutTime.split(':')[1];
      }
      this.$refs.Api_POST_HotelCreateDto.validate(valid => {
        this.submitLoading = true;
        if (valid) {
          this.$emit('insert', returnData);
        } else {
          this.$refs.scroll.wrap.scrollTop = 0;
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 修改
    saveEdit() {
      console.log(this.Api_POST_HotelCreateDto);
      if (this.checkInTime) {
        this.Api_POST_HotelCreateDto.checkInHour = this.checkInTime.split(':')[0];
        this.Api_POST_HotelCreateDto.checkInMinute = this.checkInTime.split(':')[1];
      }
      if (this.checkOutTime) {
        this.Api_POST_HotelCreateDto.checkOutHour = this.checkOutTime.split(':')[0];
        this.Api_POST_HotelCreateDto.checkOutMinute = this.checkOutTime.split(':')[1];
      }
      this.$refs.Api_POST_HotelCreateDto.validate(valid => {
        this.submitLoading = true;
        if (valid) {
          this.$emit('update', this.Api_POST_HotelCreateDto);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 点击保存照片裁剪窗口
    photoCropperSave (fileUrl) {
      this.$set(this.Api_POST_HotelCreateDto, 'imagePath', fileUrl.tempUrl);
    },
    // 点击打开照片裁剪窗口
    openPhotoCropper () {
      this.$refs.photoCropper.open(this.Api_POST_HotelCreateDto.imagePath);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    }
  }
};
</script>
<style lang="scss" scoped>
  .tip_info_style {
    // padding: 0 10px 0 30px;
    font-size: 14px;
    color: #C0C4CC;
  }
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img {
    width: 102px;
    height: 96px;
    line-height: 94px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
